{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load common_tags %}
{% load icons %}

{% block page_heading_extra %}
<a href="{% url 'admin:user_create' %}" class="btn btn-success btn-header float-end">
    {% icon 'plus' %}
</a>
{% include 'search_block.html' %}
{% endblock page_heading_extra %}

{% block content %}
<div class="page-wrapper">
    <!--block content-->
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Users
                    </div>
                    <h2 class="page-title">
                        {% trans "Users" %}
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Page body -->
    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-header">
                    <div class="card-actions">
                        <a href="{% url 'admin:user_create' %}" class="btn float-end">
                            {% icon 'plus' %}
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    {% comment %} <div id="table-default" class="table-responsive"> {% endcomment %}
                        {% comment %} <div class="row"> {% endcomment %}
                            {% if not users %}
                                <div class="col-lg-12">
                                    <div class="alert alert-warning shadow-sm">
                                        {% icon 'exclamation-triangle '%} <strong>{% trans "Warning" %}:</strong> {% trans "You don't have any user" %}
                                    </div>
                                </div>
                            {% else %}
                                <div class="col-lg-12">
                                    <table id="usersTable" class="table table-striped table-hover">
                                        <thead>
                                            <tr>
                                                <th span="col">{% trans "Username" %}</th>
                                                <th span="col">{% trans "Status" %}</th>
                                                <th span="col">{% trans "Staff" %}</th>
                                                <th span="col">{% trans "Superuser" %}</th>
                                                <th span="col">{% trans "Can Clone" %}</th>
                                                <th span="col">{% trans "Actions" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody class="searchable">
                                        {% for user in users %}
                                            {% has_perm user 'instances.clone_instances' as can_clone %}
                                            <tr class="{% if not user.is_active %}danger{% endif %}">
                                                <td>
                                                    {{ user.username }}
                                                </td>
                                                <td>
                                                    {% if user.is_active %}
                                                        {% trans "Active" %}
                                                    {% else %}
                                                        {% trans "Blocked" %}
                                                    {% endif %}
                                                </td>
                                                <td>{% if user.is_staff %}{% icon 'check' %}{% endif %}</td>
                                                <td>{% if user.is_superuser %}{% icon 'check' %}</span>{% endif %}</td>
                                                <td>{% if can_clone %}{% icon 'check' %}{% endif %}</td>
                                                <td>
                                                    <div class="btn-group">
                                                        <a class="btn btn-outline-success" title="{%trans "View Profile" %}" href="{% url 'accounts:account' user.id %}">{% icon 'eye' %}</a>
                                                        <a class="btn btn-outline-primary" title="{%trans "Edit" %}" href="{% url 'admin:user_update' user.id %}">{% icon 'pencil' %}</a>
                                                        {% if user.is_active %}
                                                            <a class="btn btn-outline-warning" title="{%trans "Block" %}" href="{% url 'admin:user_block' user.id %}">{% icon 'stop' %}</a>
                                                        {% else %}
                                                            <a class="btn btn-outline-success" title="{%trans "Unblock" %}" href="{% url 'admin:user_unblock' user.id %}">{% icon 'play' %}</a>
                                                        {% endif %}
                                                        <a class="btn btn-outline-danger" title="{%trans "Delete" %}" href="{% url 'admin:user_delete' user.id %}">{% icon 'times' %}</a>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% endif %}
                        {% comment %} </div> {% endcomment %}
                    {% comment %} </div> {% endcomment %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block script %}
<link href="{% static 'css/jquery.dataTables.min.css' %}" rel="stylesheet">
<script type="text/javascript" src="{% static 'js/jquery.dataTables.min.js' %}"></script>
{% comment %} <script type="text/javascript" src="{% static 'js/dataTables.bootstrap.min.js' %}"></script> {% endcomment %}
<script>
    $('#usersTable').DataTable({
        autoWidth:true,////不开启自动宽度，用bootstrap的自适应去调整
        "lengthMenu": [10, 20, 50, 100],//表格行数选择框内数目 显示2条,4条,20条,50条
        "displayLength": 10,//默认的显示行数 (也就是每页显示几条数据)
        "order": [],
        "language": {//自定义语言提示
            "processing": "处理中...",
            "lengthMenu": "显示 _MENU_ 项结果",
            "zeroRecords": "没有找到相应的结果",
            "info": "第 _START_ 至 _END_ 行，共 _TOTAL_ 行",
            "infoEmpty": "第 0 至 0 项结果，共 0 项",
            "infoFiltered": "(由 _MAX_ 项结果过滤)",
            "search": "搜索",
            "infoPostFix": "",
            "url": "",
            "thousands": "'",
            "emptyTable": "表中数据为空",
            "loadingRecords": "载入中...",
            "infoThousands": ",",
            "paginate": {
                "first": "首页",
                "previous": "上页",
                "next": "下页",
                "last": "末页"
            }
        }
    });
</script>
{% endblock script %}
